<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "tabBox">
    </div>
    <script>
        var arr = [{
            label: "用户名",
            name: "username",
            type: "text"
        }, {
            label: "密码",
            name: "password",
            type: "password"
        }, {
            label: "性别",
            name: "gender",
            type: "select",
            options: ['男', '女', '不男', '不女', 'Gay', '妖王']
        }, {
            label: "爱好",
            name: "hobby",
            type: "checkbox",
            options: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']
        }, {
            label: '是否已婚',
            name: 'married',
            type: 'radio',
            options: ['已婚', '未婚']
        },
        {
            label: '简介',
            name: 'resume',
            type: 'textarea'
        }];
        var box = document.querySelector('#tabBox')
        const arrIput = arr.map((item)=>{
            if(item.options){
                
                if(item.type ==='select'){
                    const opt = [`<p>${item.label}:<select name = "${item.name}">`]
                    for(var i = 0 ;i<item.options.length;i++){
                        opt.push(`\n<option value = "${item.options[i]}">${item.options[i]}</option>`) 
                    }
                    opt.push('</select></p>')
                    return opt.join('')

                }else{
                    const opt = [`<p>${item.label}:`]
                    for(var i = 0 ;i<item.options.length;i++){
                        opt.push(`<input type = "${item.type}" class = "${item.name}" value = "${item.options[i]}">${item.options[i]}`) 
                    }
                    opt.push('</p>')
                    return opt.join('')
                }

            }else{
                return `<div> <label for = "${item.type}">${item.label}:</label>
                <input type = "${item.type}" id = "${item.name}"   required ></div>`
            }
            
        })
        console.log(arrIput)
        box.innerHTML = arrIput.join('')

        
    </script>
</body>
</html>